<template>
  <article class="page">
    <headerbar :hideBack="isShow">专题</headerbar>

    <section class="frame-content bg-light-gray list-news-img bg-white">
      <cube-scroll
        ref="scroll"
        :scrollEvents="['scroll-end']"
        :options="options"
        @pulling-up="onPullingUp"
        @pulling-down="onPullingDown"
        @scroll-end="scrollEnd"
      >
        <fetchData :loading="isLoading" :data="list"></fetchData>
        <div
          class="item"
          @click="goDetail(item)"
          v-for="(item, index) in list"
          :key="index"
        >
<!--          <div class="img">
            <img v-if="item.picOssUrl && tools.indexOfHttp(item.picOssUrl)" :src="item.picOssUrl" alt="">
            <img v-else-if="tools.indexOfHttp(item.listPicUrl)" :src="item.listPicUrl" alt="">
            <img v-else-if="item.listPic" :src="tools.getImgUrl(item.listPic,true)" alt="">
            <img v-else="" src="../../../../static/images/user_bg.jpg" alt="">
          </div>-->
          <!--      没有图片则不显示-->
          <div class="img" v-if="tools.indexOfHttp(item.picOssUrl)">
            <img :src="item.picOssUrl" alt="">
          </div>
          <div class="img" v-else-if="tools.indexOfHttp(item.listPicUrl)">
            <img :src="item.listPicUrl" alt="">
          </div>
          <div class="img" v-else-if="item.listPic">
            <img :src="tools.getImgUrl(item.listPic,true)" alt="">
          </div>
          <!--      没有图片则不显示结束-->
          <div class="cont">
            <h2 class="title"><div class="hower">{{item.title}}</div></h2>
            <div class="tip">
              <span>{{ item.source }}</span>
              <span v-if="item.zhuanji !== 1">{{
                tools.formatDate(item.createTime)
              }}</span>
            </div>
          </div>
        </div>
        <onBottom v-if="onBottom"></onBottom>

        <!--<div class="item" v-for="item in 10">
          <div class="img">
            <img src="../../../../static/images/user_bg.jpg" alt="">
          </div>
          <div class="cont">
            <h2 class="title">人事动态人事动态人事动态人事动态人事动态人事动态</h2>
            <div class="tip">
              <span>人民网</span>
              <span>2052-5-4</span>
            </div>
          </div>
        </div>-->
      </cube-scroll>
    </section>
    <footerbar></footerbar>
  </article>
</template>


<script>
import footerbar from "@/components/layout/footerbar.vue";
export default {
  components: { footerbar },
  name: "special",
  data() {
    return {
      onBottom: false,
      list: [],
      isShow: true,
      files: [],
      attachmentList: [],
      channelId: "8880",
      currentIndex: 1,
      pageIndex: 1,
      pageSize: 10,
      isLoading: false,
      detail: {},
      y: "",
      options: {
        pullUpLoad: true,
        pullDownRefresh: {
          txt: " ",
        },
        scrollbar: false,
      },
    };
  },
  watch: {
    $route(to, from) {
      this.pageIndex = 1;
      this.list = [];
      if (this.$route.query.id) {
        this.channelId = this.$route.query.id;
        this.isShow = false;
      } else {
        this.channelId = "8880";
        this.isShow = true;
      }
      this.fetchList();
    },
  },
  created() {
    if (this.$route.query.id) {
      this.channelId = this.$route.query.id;
      this.isShow = false;
    } else {
      this.channelId = "8880";
      this.isShow = true;
    }
    this.fetchList();
  },
  methods: {
    goDetail(item) {
      if (item.zhuanji === 1) {
        console.log("aaaaaaaaaaaaaaaa");
        this.$router.push({ name: "special", query: { id: item.id } });
      } else {
        this.$store.state.specialDetail = item;
        if (item.title === "致敬“最美逆行者”") {
          return this.$router.push({
            name: "specialDetail2020",
            query: { id: item.id, flag: 2 },
          });
        }
        if (item.videoUrl && item.videoUrl !== "") {
          let url = item.videoUrl;
          if (url.indexOf("?") >= 0) {
            url = url + "&access_token=" + this.tools.getToken();
          } else {
            url = url + "?access_token=" + this.tools.getToken();
          }
          console.log(url);
          if (window.android && window.android.openUrlAdapt) {
            window.android.openUrlAdapt(url, item.title);
          }
          return;
        }
        this.$router.push({
          name: "specialDetail",
          query: { id: item.id, flag: 2 },
        });
      }
    },
    fetchList(id) {
      this.onBottom = false;
      this.isLoading = true;
      id = id || this.channelId;
      let data = {
        channelId: id || "",
        pageNo: this.pageIndex,
        pageSize: this.pageSize,
      };
      // return this.fetchService.contentPage(data).then(res => {//未加合集
      return this.fetchService.specialList(data).then((res) => {
        //专题加合集
        if (res.code !== 0) {
          return this.tools.alert(
            res.message || res.resp_msg || "接口出错，请联系管理员"
          );
        }
        this.isLoading = false;
        this.pageIndex++;
        if (res.data.album && res.data.album.length > 0) {
          this.options.pullUpLoad = false;
          res.data.album.map((v) => {
            v.title = v.channelName;
            v.listPic = v.pic;
            v.zhuanji = 1;
          });
          this.list = this.list.concat(res.data.album);
        }
        this.list = this.list.concat(res.data.page);
        if (res.data.page.length === 0) {
          this.onBottom = true;
          // this.tools.tip('暂无更多')
          this.options.pullUpLoad = false;
        }
        setTimeout(() => {
          this.$refs.scroll.forceUpdate &&
            this.$refs.scroll.forceUpdate(true, false);
        }, 100);
        return res;
      });
    },
    /*测试栏目*/
    fetchClass() {
      let data = {
        beyond: "",
        channelName: "",
        //          "channelType": "1",
        createTime: "",
        createUser: "",
        delFlag: "",
        description: "",
        parentId: this.channelId,
        id: "",
        isCommont: "",
        pic: "",
        publicWay: "1",
        tenantId: "",
        treePath: "",
        updateTime: "",
        updateUser: "",
      };
      this.fetchService.childChannels(data).then((res) => {});
    },
    onPullingUp() {
      this.fetchList().then((res) => {
        setTimeout(() => {
          this.$refs.scroll.forceUpdate &&
            this.$refs.scroll.forceUpdate(true, false);
          this.options.pullUpLoad = false;
        }, 100);
      });
    },
    scrollEnd({ x, y }) {
      this.y = y;
      console.log("scrollEnd", this.y);
    },
    onPullingDown() {
      console.log("onPullingDown");
      this.options.pullUpLoad = true;
      this.pageIndex = 1;
      this.list = [];
      this.fetchList();
    },
  },
};
</script>

<style scoped>
</style>
